<script lang="ts" setup>
import { onMounted } from 'vue';
import { showLoading, navigateTo, getCurrentInstance, showToast } from '@tarojs/taro';
import { Plus as AppNutIconPlus, Del2 as AppNutIconDel2 } from '@nutui/icons-vue-taro';
import { INSERT_SPARE_STOCK_RECORD } from '/@/api/modules/spare-parts/spare-stock-record';
import { state, formState } from './state';
import dayjs from 'dayjs';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
  warehouseCode: string;
  warehouseName: string;
};

/**
 * @function 确认提交
 */
function submit() {
  if (!state.spareStockList || state.spareStockList.length === 0) {
    showToast({ title: '请选择申请耗材', icon: 'error' });
    return;
  }

  if (!formState.supplierSign) {
    showToast({ title: '请供应商签名', icon: 'error' });
    return;
  }
  if (!formState.userSign) {
    showToast({ title: '请领用方签名', icon: 'error' });
    return;
  }
  formState.content = [];
  state.spareStockList.forEach((item) => {
    formState.content.push({
      id: item.spareId,
      tenantNo: 1,
      spare: item.spare,
      operateNum: item.operateNum,
    });
  });

  formState.recordTime = dayjs().valueOf().toString();
  formState.decription = state.description;
  formState.category = 1;
  formState.recordTypeId = '714155892172582912';
  formState.recordTypeCode = 'stock_out_use';
  formState.recordTypeName = '领用出库';

  showLoading({ title: '加载中...' });
  INSERT_SPARE_STOCK_RECORD({ content: formState }).then((res) => {
    if (res.comResp?.code === 100) {
      navigateTo({
        url: '/pages/spare/submit-success/index',
      });
    }
  });
}

onMounted(() => {
  formState.warehouseId = params.id;
  formState.warehouseCode = params.warehouseCode;
  formState.warehouseName = decodeURI(params.warehouseName);
  formState.supplierSign = '';
  formState.userSign = '';
  formState.content = [];
  //清空数据
  state.description = '';
  state.spareStockList = [];
});

/**
 * @function 上传文件 提供商
 * @param imgList
 */
function uploadImageChangeByProvider(imageUrl: { key: string; src: string } | null) {
  formState.supplierSign = imageUrl ? imageUrl.src : '';
}

/**
 @function 上传文件 领用方
 * @param imgList
 */
function uploadImageChangeByReceiver(imageUrl: { key: string; src: string } | null) {
  formState.userSign = imageUrl ? imageUrl.src : '';
}
</script>

<template>
  <view class="asset-alter-edit app-page--1">
    <app-navbar title="耗材申请" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="asset-alter-edit__wrapper">
        <nut-form>
          <nut-cell title="备件仓库" :desc="decodeURI(params.warehouseName)" />
          <nut-form-item>
            <nut-textarea
              v-model="state.description"
              placeholder="填写申请说明"
              rows="8"
              limit-show
              max-length="200"
              text-align="left"
            />
          </nut-form-item>
        </nut-form>
        <nut-form>
          <nut-form-item
            required
            prop="assetList"
            label-width="0"
            label-align="left"
            error-message-align="left"
          >
            <view class="asset-alter-edit__pre-asset-table-header">
              <view class="asset-alter-edit__pre-asset-table-header--name">
                <text>耗材名称</text>
              </view>
              <view class="asset-alter-edit__pre-asset-table-header--number-input">
                <text>数量</text>
              </view>
              <view class="asset-alter-edit__pre-asset-table-header--handle">
                <text>操作</text>
              </view>
            </view>
            <view
              v-for="(item, index) in state.spareStockList"
              :key="item.spareId"
              class="asset-alter-edit__pre-asset-table-row"
            >
              <view class="asset-alter-edit__pre-asset-table-row--name">{{
                item.spareName || '-'
              }}</view>
              <view class="asset-alter-edit__pre-asset-table-row--number-input">
                <nut-input-number v-model="item.operateNum" :min="1" :max="item.stockNum" />
              </view>
              <view class="asset-alter-edit__pre-asset-table-row--handle">
                <app-nut-icon-del2
                  class="asset-alter-edit__pre-asset-table-row__del-btn"
                  @click="state.spareStockList?.splice(index, 1)"
                />
              </view>
            </view>
            <nut-button
              block
              plain
              shape="round"
              type="info"
              @click="state.appSpareListPopupIsShow = !state.appSpareListPopupIsShow"
            >
              <template #icon>
                <app-nut-icon-plus />
              </template>
              <text>添加备品</text>
            </nut-button>
          </nut-form-item>
        </nut-form>

        <nut-form>
          <nut-form-item class="nut-form__title" label="双方签字" />
          <nut-form-item label="供应商">
            <app-upload-signature
              @on-change="uploadImageChangeByProvider"
              module="spare"
              signPage="/pages/spare/sign/index?event=onSupplierCanvas"
              event="onSupplierCanvas"
              height="80px"
            />
          </nut-form-item>
          <nut-form-item label="领用方">
            <app-upload-signature
              @on-change="uploadImageChangeByReceiver"
              module="spare"
              height="80px"
              signPage="/pages/spare/sign/index?event=onUserCanvas"
              event="onUserCanvas"
            />
          </nut-form-item>
        </nut-form>
      </view>
    </scroll-view>

    <view class="asset-alter-edit__footer">
      <nut-button block type="info" @click="submit">
        <text>提交</text>
      </nut-button>
    </view>

    <app-spare-stock-list-popup
      v-model="state.appSpareListPopupIsShow"
      title="耗材申请"
      :options="{
        warehouseId: [params.id],
      }"
      @on-selected="(id: string, item: AppSysSpare.Dto,num:number) => {
      if (state.spareStockList.findIndex((spareStockItem) => { return spareStockItem.spareId === id }) >= 0) return;

      state.spareStockList.push({
        spareId: id ,
        spareName: item.spareName||'',
        operateNum: 1,
        stockNum: num,
        spare: item,
      })
    }"
    />
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
